<template>
	<view>
		
		<view class="together-ky">
			
			
			<kySwiper></kySwiper>
			
			<view class="quickNav">
				<quickNav></quickNav>
			</view>
			
			<view class="ky-title">
				<ky-title></ky-title>
			</view>
			
			<view class="recommendHuati">
				<recommend-huati>防疫日记：在家做点啥？</recommend-huati>
				<recommend-huati>疫情下的小动物</recommend-huati>
				<recommend-huati>#疫情下的校园生活#</recommend-huati>
				<recommend-huati>防疫注意事项你知道多少？</recommend-huati>
			</view>
			
			<!-- 1 -->
			<view v-for="item in data" :key="item.id">
				<view class="ky-title">
					<ky-title>
						<view>{{item.title}}</view>
					</ky-title>
				</view>
				<view class="recommend">
					<recommend :list="item.data">
						<view class="more" @click="news">查看更多</view>
					</recommend>
				</view>
			</view>
			
			
			
			
		</view>
		
	</view>
</template>

<script>
	
	const ky = require('@/common/home/ky.json').ky;
	
	import kySwiper from './ky-swiper/ky-swiper.vue'
	import quickNav from './quick-nav/quick-nav.vue'
	import kyTitle from './ky-title/ky-title.vue'
	import recommendHuati from './recommend-huati/recommend-huati.vue'
	import recommend from '../recommend/recommend.vue'
	
	export default {
		data() {
			return {
				data: []
			}
		},
		components: {
			kySwiper,
			quickNav,
			kyTitle,
			recommendHuati,
			recommend
		},
		mounted() {
			this.data = ky;
		},
		methods: {
			news() {
				uni.showToast({
					title: '没有更多了',
					duration: 1500,
					icon: 'none'
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	
	.together-ky {
		padding: 30rpx 20rpx;
		background-color: #d0e7fd;
		// height: 100vh;
	}
	
	.quickNav {
		margin-top: 30rpx;
	}
	
	.recommend {
		.more {
			width: 100%;
			color: #fff;
			font-size: 30rpx;
			height: 80rpx;
			background-color: #72aef7;
			text-align: center;
			line-height: 80rpx;
			border-radius: 5px;
		}
	}
	
</style>
